<template>
	<view class="page">
		<block v-if="isInit">
			<fu-loading></fu-loading>
		</block>
		<block v-else>
			<view class="order-detail-page">
				<!-- 顶部导航栏-开始 -->
				<view class="cu-bar fixed" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
					<view class="action" @tap="back()"><text class="cuIcon-back"></text></view>
					<view class="content" :style="[{ top: StatusBar + 'px' }]">订单详情</view>
				</view>
				<!-- 顶部导航栏-结束 -->
				<!-- 订单状态-开始 -->
				<view class="back_c">
					<view class="status-box flex align-center justify-between"
						v-if="order_type == 3 || order_type == 6">
						<view class="left text-white">
							<view class="status">{{info.status | transformStatus}}</view>
							<view class="text-sm" v-if="info.status == 0" style="color: rgba(255,255,255,0.8);">
								剩余时间:{{ downTime.hours }}:{{ downTime.minutes }}:{{ downTime.seconds }}
							</view>
						</view>
						<!-- <image class="icon" :src="info.status | statusIconFil" mode="aspectFit"></image> -->
						<image class="icon" mode="aspectFit"></image>
					</view>
					<view class="status-box flex align-center justify-between" v-if="order_type == 5">
						<view class="left text-white">
							<view class="status">{{info.group_info.is_full | assembleStatus}}</view>
						</view>
					</view>

					<!-- 订单状态-结束 -->
					<view class="group-info order-radio padding" v-if="order_type == 5">
						<view class="flex align-center">
							<image class="group-tip margin-right-sm" src="../../static/group-tip.png" mode=""></image>
							<text class="text-df" v-if="info.few_people<1">已成团</text>
							<view class="flex-sub text-theme text-df flex align-center flex-wrap" v-else
								style="word-break: break-all;">
								<text>拼团中，还差{{info.few_people}}人拼成，剩</text>
								<ben-count-down :leftSeconds='info.remaining_time'></ben-count-down>
								<text>结束</text>
							</view>
						</view>
						<view class="flex justify-center margin-top" v-if="info.join_number && info.join_number>0">
							<block v-for="indexN of info.join_number">
								<view class="header-img margin-lr-sm" v-if="info.active_order_user[indexN-1]">
									<image class="" :src="info.active_order_user[indexN-1].user_head" mode=""></image>
								</view>
								<view class="header-img margin-lr-sm border flex align-center justify-center text-999"
									v-else>
									<text>?</text>
								</view>
							</block>
						</view>
					</view>
					<!-- 物流 start -->
					<view class="order-wrap order-radio" v-if="info.status > 1" style="margin-bottom: 20rpx;">
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">快递公司</view>
							<view class="order-item-info text-666">{{ info.expressInfo.name }}</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">快递单号</view>
							<view class="order-item-info text-666">{{ info.expressInfo.courierNum }}</view>
						</view>
					</view>
					<!-- 物流 end -->
					<!-- 地址信息 start -->
					<view class="address-wrap margin-bottom-sm order-radio-top-half">
						<view class="address flex justify-start">
							<view class="address-img flex justify-center align-center">
								<image src="../../static/address.png" mode=""></image>
							</view>
							<view class="address-info">
								<view class="address-title flex justify-start align-center text-bold">
									<!-- <view class="tag" v-if="info.addressInfo.label_name">
										{{ info.addressInfo.label_name }}
									</view> -->
									<view class="address-name text-333 text-lg">{{ info.addressInfo.receiver_name }}
									</view>
									<text v-if="info.addressInfo.receiver_sex == 1">(先生)</text>
									<text v-if="info.addressInfo.receiver_sex == 2">(女士)</text>
									<view class="address-phone text-333 text-lg">{{ info.addressInfo.receiver_mobile }}
									</view>
								</view>
								<view class="address-pos text-333 text-df">
									{{ info.addressInfo.province }}{{ info.addressInfo.city }}{{ info.addressInfo.district }}{{ info.addressInfo.receiver_address }}
								</view>
							</view>
						</view>
						<!-- <image src="../../static/bottom_line.png" mode="" class="img"></image> -->
					</view>
				</view>
				<!-- 地址信息 end -->
				<!-- 商品信息 start -->
				<view class="order-goods-wrap order-radio-top-half">
					<view class="padding-top">
						订单编号：{{info.order_sn}}
					</view>
					<view class="flex flex-direction solid-bottom" v-for="(item, index) in info.goods" :key="index">
						<view class="order-item-content flex justify-between ">
							<view class="order-item-img">
								<fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image>
							</view>
							<view class="order-item-info">
								<view class="order-item-name text-df text-333 text-cut">{{ item.goods_name }}</view>
								<view class="order-item-sku text-df text-sm text-999">{{ item.sku_name }}</view>
								<view class="order-price flex justify-between align-center">
									<text class="text-price text-lg"
										style="color: #333!important;">{{ item.calculate_price }}</text>
									<text class="text-999 text-sm">x{{ item.num }}</text>
								</view>
							</view>
						</view>
						<view class="btns flex align-center justify-end margin-bottom-sm" v-if="info.status == 4">
							<view @click="toEvalue(item)" class="btn" type="default">查看评价</view>
						</view>
					</view>
				</view>
				<!-- 商品信息 end -->
				<block>
					<!-- 付款信息 start -->
					<view class="order-wrap order-radio-bottom-half" style="margin-bottom: 20rpx;">

						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333 flex justify-between">
								<text>配送服务</text>
								<!-- <text>费</text> -->
							</view>
							<view class="order-item-info text-666 text-right">
								{{ info.goodsInfo.freightPrice>0 ? "¥"+info.goodsInfo.freightPrice:"包邮"}}
							</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">商品总价</view>
							<view class="order-item-info text-666 text-right ">
								￥{{ (info.goodsInfo.originalPrice - info.goodsInfo.freightPrice ) | priceFilter }}
							</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">合计</view>
							<view class="order-item-info text-666 text-right goods-price">
								￥{{info.payable_money | priceFilter }}
							</view>
						</view>
						<!-- <view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333 flex justify-between">
								<text>优</text>
								<text>惠</text>
								<text>券</text>
							</view>
							<view class="order-item-info text-666 text-right">
								-¥{{ info.goodsInfo.coupon  | priceFilter }}
							</view>
						</view> -->

						<!-- <view class="item total-price flex align-center justify-between">
							<text class="item-label"></text>
							<view class="item-value text-sm text-gray" v-if='info.status != 0 && order_type !=7'>
								实付款：
								<text class="text-sm goods-price">
									¥
									<text class="text-lg text-bold">{{info.payable_money | priceFilter }}</text>
								</text>
							</view>
							<view class="item-value text-sm text-gray" v-if="info.status == 0 && order_type !=7">
								需付款：
								<text class="text-sm goods-price">
									¥
									<text class="text-lg text-bold">{{info.payable_money | priceFilter }}</text>
								</text>
							</view>
						</view> -->

					</view>
					<!-- 付款信息 end -->
					<view class="order-wrap order-radio-bottom-half" style="margin-bottom: 20rpx;">
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999">订单备注</view>
							<view class="order-item-info text-666">
								{{ info.orderInfo.remarks? info.orderInfo.remarks:'暂无备注' }}
							</view>
						</view>
					</view>
					<!-- 订单信息 start -->
					<view class=" order-wrap margin-bottom-sm order-radio" v-if="info.status > 0">

						<view class="order-item text-df flex justify-start align-center">
							<view class="order-item-title text-999 flex justify-between">订单编号</view>
							<view class="order-item-info text-666">{{ info.orderInfo.order_sn }}
								<text class="text-blue text-sm padding-left-sm"
									@click="copyOrderSn(info.orderInfo.order_sn)">复制</text>
							</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999 flex justify-between">下单时间</view>
							<view class="order-item-info text-666">{{ info.create_time }}</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999">付款金额</view>
							<view class="order-item-info text-666 goods-price" style="color: #333!important;">
								￥{{ info.orderInfo.payable_money }}
							</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999 flex justify-between">支付方式</view>
							<view class="order-item-info text-666">{{ info.orderInfo.pay_type }}</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999 flex justify-between">支付时间</view>
							<view class="order-item-info text-666">{{ info.orderInfo.pay_time }}</view>
						</view>
					</view>
					<!-- 订单信息 end -->
					<!-- 拼团商品的信息 -->
					<!-- 	<view class="order-wrap margin-bottom-sm  order-radio" v-if="order_type==5">
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">拼团明细</view>
							<view class="order-item-info text-666"></view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">开团时间</view>
							<view class="order-item-info text-666">{{ info.group_info.create_time*1000 | formatDate }}
							</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">是否成团</view>
							<view class="order-item-info text-666">{{ info.group_info.is_full==1?'是':'否' }}</view>
						</view>
					</view> -->
					<!-- 预定商品的信息    -->
					<!-- <view v-if="order_type==7" class="  order-wrap margin-bottom-sm  order-radio">
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">预售明细</view>
							<view class="order-item-info text-666"></view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title-max text-333">尾款开始时间:</view>
							<view class="order-item-info text-666" v-if='info.activity_time'>
								{{ info.activity_time.presell_stime*1000 |formatDate }}
							</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title-max text-333">尾款结束时间:</view>
							<view class="order-item-info text-666" v-if='info.activity_time'>
								{{ info.activity_time.presell_etime*1000 | formatDate }}
							</view>
						</view>
					</view> -->
					<!-- 订单信息-结束 -->
				</block>
				<!-- 底部按钮 start -->
				<!-- 商家端状态值 （-3商家已取消订单）  0待付款（取消订单，修改金额） 1待发货（发货）2已发货  -->
				<block
					v-if="info.status == -3 || info.status == 0 || info.status == 1 || info.status == 2|| info.status == 5">
					<view class="footer">
						<view class="order-btn-wrap solid-top">
							<view class="order-btn flex justify-end align-center text-center">
								<block v-if="info.status == -3">
									<view class="order-btn-item text-333 text-sm text-theme active"
										@click.stop="delOrder()">删除订单</view>
								</block>
								<block v-if="info.status == 2">
									<view class="order-btn-item text-333 text-sm" @click.stop="checkLogistics()">查看物流
									</view>
								</block>
								<block v-if="info.status == 0">
									<view class="order-btn-item text-333 text-sm" @click.stop="cancalOrderShow()">取消订单
									</view>
									<!-- <view class="order-btn-item text-333 text-sm active"
										@click.stop="revisedAmountShow()">修改金额</view> -->
								</block>
								<block v-if="info.status == 1  ">
									<!-- 拼团 已经成团 -->
									<block v-if="order_type== 5 && info.group_info && info.group_info.is_full == 1">
										<view class="order-btn-item text-333 text-sm active"
											@click.stop="sureDeliver()">确认发货</view>
									</block>
									<!-- 预售已经 支付尾款 -->
									<block v-if="order_type ==7 && info.final_status == 1">
										<view class="order-btn-item text-333 text-sm text-theme active"
											@click.stop="sureDeliver()">确认发货</view>
									</block>
									<block v-if="order_type !=7 && order_type !=5 ">
										<view class="order-btn-item text-333 text-sm active"
											@click.stop="sureDeliver()">确认发货</view>
									</block>
								</block>
							</view>
						</view>
					</view>
				</block>
				<!-- 底部按钮 end -->
			</view>

			<!-- 修改金额 start -->
			<fu-popup mode="right" :z-index="99" v-model="moneyShow" :safeAreaInsetBottom="true">
				<view class="money-wrap" :style="[{ paddingTop: 'calc(' + CustomBar + 'px + ' + '10rpx)' }]">
					<view class="order-item-content flex justify-between margin-bottom-sm"
						v-for="(oItem, oIndex) in amountItem" :key="oIndex">
						<view class="order-item-img">
							<fu-image :src="oItem.goods_thumb" mode="aspectFill"></fu-image>
						</view>
						<view class="order-item-info">
							<view class="order-item-name text-df text-333 text-cut">{{ oItem.goods_name }}</view>
							<view class="order-item-sku text-df text-sm text-999">{{ oItem.sku_name }}</view>
							<view class="order-price text-df text-sm text-999">
								<text>实付价：</text>
								<text class="text-price">{{ oItem.goods_money }}</text>
							</view>
							<view class="order-price flex justify-between align-center ">
								<view class=" text-lg flex justify-start align-end margin-right">
									<view class="text-symbol">￥</view>
									<input type="number" placeholder="请输入减免金额" placeholder-class="placeholder"
										v-model="oItem.modify_price" @input="moneyChange($event, oIndex)" />
								</view>
								<view class="text-999 text-sm num">x{{ oItem.num }}</view>
							</view>
						</view>
					</view>
					<view class="money-btn solid-top">
						<view class="btn  text-333 text-center" @click="sureModify">确认修改</view>
					</view>
				</view>
			</fu-popup>
			<!-- 修改金额 end -->
			<!-- 取消订单 start -->
			<fu-popup mode="bottom" :z-index="99" v-model="orderShow" borderRadius="16" :safeAreaInsetBottom="true">
				<view class="cancel-order">
					<view class="cancel-order-title flex justify-between align-center">
						<view></view>
						<view class="order-title-center flex justify-center align-center">
							<view class="circle shallow round"></view>
							<view class="circle round"></view>
							<view class="text-000 text-lg">取消订单</view>
							<view class="circle  round"></view>
							<view class="circle shallow round"></view>
						</view>
						<view class="order-title-cancle cuIcon-roundclose text-xl" @click="orderShow = false"></view>
					</view>
					<view class="cancel-order-tipstext-666 text-sm">请选择取消订单原因</view>
					<view class="cancel-order-reason">
						<view class="reason-item flex justify-between align-center solid-bottom"
							v-for="(item, index) in cancelOrderReason" :key="item.id"
							@click="chooseCancelReason(item, index)">
							<view class="text-333 text-df">{{ item.reason }}</view>
							<view
								:class="{ 'cuIcon-round': !item.active, 'cuIcon-roundcheck': item.active, 'text-theme': item.active }"
								class="text-xl text-ccc"></view>
						</view>
					</view>
					<view class="cancel-order-btn text-lg text-white text-center" @click.stop="cancalOrder()">取消订单
					</view>
				</view>
			</fu-popup>
			<!-- 取消订单 end -->

			<!-- 断网检测 start -->
			<fu-notwork></fu-notwork>
			<!-- 断网检测 end -->
		</block>
	</view>
</template>

<script>
	import benCountDown from '../../components/ben-count-down/ben-count-down.vue';
	export default {
		components: {
			benCountDown
		},
		data() {
			return {
				order_type: '', //订单类型, 3：普通订单
				orderShow: false, //是否订单取消
				money: '', //修改金额的值
				downTime: {
					days: 0,
					hours: 0,
					minutes: 0,
					seconds: 0
				},
				timer: null, // 定时器
				info: {
					//地址信息
					addressInfo: {},
					//订单信息
					orderInfo: {},
					// 快递信息
					expressInfo: {},
					// 商品优惠信息
					goodsInfo: {},

					status: '', //订单状态
					// 商品信息
					goods: [{}],
					activity_time: {
						presell_stime: '',
						presell_etime: '',
						is_pay: ''
					}, // 预售信息
					final_status: '', // 尾款状态
					final_order: {
						payable_money: '', //尾款金额
						order_type: '',
						order_sn: ''
					},
					group_info: {
						is_full: '',
						create_time: '', // 拼团信息
					},
				}, //详情数据
				cancelOrderReasonId: '', //选择的取消订单原因id
				cancelOrderReason: [], //取消订单原因列表
				moneyShow: false, //修改金额弹框显示
				amountItem: {}, //修改金额数据
				order_sn: '', //订单编号
				isInit: false //初始化数据
			};
		},
		filters: {
			/**
			 * 格式化秒
			 * @param int  value 总秒数
			 * @return string result 格式化后的字符串
			 */
			timeFormat(value) {
				var theTime = parseInt(value); // 需要转换的时间秒 
				var theTime1 = 0; // 分 
				var theTime2 = 0; // 小时 
				var theTime3 = 0; // 天
				if (theTime > 60) {
					theTime1 = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					if (theTime1 > 60) {
						theTime2 = parseInt(theTime1 / 60);
						theTime1 = parseInt(theTime1 % 60);
						if (theTime2 > 24) {
							//大于24小时
							theTime3 = parseInt(theTime2 / 24);
							theTime2 = parseInt(theTime2 % 24);
						}
					}
				}
				var result = '';
				if (theTime1 > 0) {
					result = "" + parseInt(theTime1) + "分" + result;
				}
				if (theTime2 > 0) {
					result = "" + parseInt(theTime2) + "小时" + result;
				}
				if (theTime3 > 0) {
					result = "" + parseInt(theTime3) + "天" + result;
				}
				return result;
			},
			priceFilter(val) {
				return Number(val).toFixed(2)
			},
			/**
			 *@description 过滤状态值
			 */
			transformStatus(val) {
				switch (val) {
					case -3:
						return '商家已取消';
						break;
					case -1:
						return '已取消';
						break;
					case 0:
						return '订单待付款';
						break;
					case 1:
						return '等待卖家发货';
						break;
					case 2:
						return '卖家已发货';
						break;
					case 3:
						return '已完成';
						break;
					case 4:
						return '订单已评价';
						break;
				}
			},
			assembleStatus(val) {
				switch (val) {
					case 0:
						return '订单进行中';
						break;
					case 1:
						return '订单已成团';
						break;
				}
			}
		},
		onBackPress(e) {
			uni.$emit('onPageUpdata', {})
		},
		onShow() {
			if (this.order_sn) {
				this.getOrderDetail(this.order_sn);
			}
		},
		onLoad(options) {
			console.log('options', options)
			let {
				order_sn,
				order_type
			} = options;
			this.order_sn = order_sn;
			this.order_type = order_type
			// this.getOrderDetail(order_sn);
			this.getOrderReason();
		},

		methods: {
			// 开启倒计时
			initDownTime(time) {
				if (this.timer) {
					clearInterval(this.timer);
				}
				let endTime = time * 1000;
				let nowTime = new Date().getTime();
				let timeleft = endTime - nowTime;
				if (timeleft > 0) {
					var days = parseInt((timeleft / (1000 * 60 * 60 * 24)));
					var hours = parseInt((timeleft / (1000 * 60 * 60)) % 24);
					var minutes = parseInt((timeleft / (1000 * 60)) % 60);
					var seconds = parseInt((timeleft / 1000) % 60);
					this.downTime.days = days;
					this.downTime.hours = hours < 10 ? '0' + hours : hours;
					this.downTime.minutes = minutes < 10 ? '0' + minutes : minutes;
					this.downTime.seconds = seconds < 10 ? '0' + seconds : seconds;
					this.timer = setInterval(() => {
						nowTime = new Date().getTime();
						timeleft = endTime - nowTime;
						if (timeleft > 0) {
							var days = parseInt((timeleft / (1000 * 60 * 60 * 24)));
							var hours = parseInt((timeleft / (1000 * 60 * 60)) % 24);
							var minutes = parseInt((timeleft / (1000 * 60)) % 60);
							var seconds = parseInt((timeleft / 1000) % 60);
							this.downTime.days = days;
							this.downTime.hours = hours < 10 ? '0' + hours : hours;
							this.downTime.minutes = minutes < 10 ? '0' + minutes : minutes;
							this.downTime.seconds = seconds < 10 ? '0' + seconds : seconds;
						} else {
							clearInterval(this.timer);
							this.getDetail();
							this.timer = null;
						}
					}, 1000);
				}
			},
			checkLogistics() {
				this.$urouter.navigateTo({
					url: "/pages/order/order/express-delivery/index",
					params: {
						order_sn: this.order_sn,
					},
				});
			},
			/**
			 * @description 页面返回
			 * @param {delta} delta = 返回的页面数，如果 delta 大于现有页面数，则返回到首页
			 */
			back(delta) {
				console.log('页面返回');
				uni.navigateBack({
					delta: delta || 1
				});
			},
			/**
			 * @author 邓东方
			 * @date 2021-5-10
			 * @description 复制单号
			 * @param {Number,String} 订单号
			 */
			copyOrderSn(order_sn) {
				uni.setClipboardData({
					data: order_sn,
					success: function() {
						// console.log('success');
					}
				});
			},
			/**
			 * @description 获取订单详情信息
			 */
			getOrderDetail(order_sn) {
				this.isInit = true;
				this.$api
					.post(global.apiUrls.getOrderInfo, {
						order_sn: order_sn,
						order_type: this.order_type
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							let info = res.data.data;
							if (info.cancel_time) {
								this.initDownTime(info.cancel_time);
							}
							if (info.status == 2) {
								this.initDownTime(info.order_receive_time);
							}
							console.log(info.cancel_time);
							this.info = info
							this.info.addressInfo = info.addressInfo;
							this.info.status = info.status;
							// this.order_type = info.order_type
							this.info.goods = info.goods;
							this.info.goodsInfo = info.goodsInfo;
							this.info.expressInfo = info.expressInfo;
							this.info.orderInfo = info.orderInfo;
						} else {
							this.$message.info(res.data.msg);
						}
						this.isInit = false;
					})
					.catch(err => {
						this.isInit = false;
						console.log(err);
					});
			},
			/**
			 * @description 修改金额
			 * @param {Object} item 事件对象数据
			 * @param {Number} index 事件对象下标
			 */
			revisedAmountShow() {
				// 对象拷贝
				let data = this.$util.deepClone(this.info.goods);
				this.amountItem = data;
				this.moneyShow = true;
			},
			/**
			 * @description 金额判断
			 */
			moneyChange(e, index) {
				// 减免金额不能小于0
				if (Number(e.detail.value) <= 0) {
					this.$message.info('减免金额不能小于0');
					this.$nextTick(function() {
						this.amountItem[index].modify_price = '';
					});
				}
				//减免金额不能大于原始金额
				if (Number(e.detail.value) >= Number(this.amountItem[index].goods_money)) {
					this.$message.info('减免金额不能大于实付金额');
					this.$nextTick(function() {
						this.amountItem[index].modify_price = '';
					});
				}
				// 小数点只能到后两位
				if (e.detail.value.toString().split('.')[1] && e.detail.value.toString().split('.')[1].length > 2) {
					this.$message.info('小数点后只能保留两位');
					let num1 = e.detail.value.toString().split('.')[0];
					let num2 = e.detail.value
						.toString()
						.split('.')[1]
						.slice(0, 2);
					this.$nextTick(function() {
						this.amountItem[index].modify_price = `${num1}.${num2}`;
					});
				}
			},
			/**
			 * @description 确认修改金额
			 */
			sureModify() {
				let amountItem = this.amountItem;
				let data = {
					order_sn: this.order_sn,
					goods: []
				};
				amountItem.forEach((val, i) => {
					// modify_price存在且大于0
					if (val.modify_price && val.modify_price > 0) {
						let content = {
							goods_id: val.goods_id,
							modify_price: val.modify_price,
							sku_id: val.sku_id
						};
						data.goods.push(content);
					}
				});
				if (data.goods.length == 0) {
					this.$message.info('请修改金额进行提交');
					return;
				}
				console.log(data);
				let that = this;
				this.$util.showModal({
					title: '提示',
					content: '确定修改金额吗？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							that.$api
								.post(global.apiUrls.shop_modify_order_price, {
									order_sn: data.order_sn,
									goods: JSON.stringify(data.goods)
								})
								.then(res => {
									console.log(res);
									if (res.data.code == 1) {
										that.amountItem = {};
										that.$message.success('操作成功');
										that.getOrderDetail(that.order_sn);
									} else {
										that.$message.info(res.data.msg);
									}
									that.moneyShow = false;
								})
								.catch(err => {
									that.moneyShow = false;
									console.log(err);
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			/**
			 * @description 打开取消订单弹窗
			 * @param {String,Number} order_sn 订单编号
			 */
			cancalOrderShow() {
				this.orderShow = true;
			},
			/**
			 * @description 取消订单
			 */
			cancalOrder() {
				let that = this;
				if (!that.cancelOrderReasonId) {
					this.$message.info('请选择取消订单原因');
					return;
				}
				this.$util.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							that.$api
								.post(global.apiUrls.cancelOrder, {
									order_sn: that.order_sn,
									return_id: that.cancelOrderReasonId
								})
								.then(res => {
									console.log(res);
									if (res.data.code == 1) {
										that.$message.success('操作成功');
										that.getOrderDetail(that.order_sn);
										that.cancelOrderReason.forEach(val => {
											val.active = false;
										});
									} else {
										that.$message.info(res.data.msg);
									}
									that.orderShow = false;
								})
								.catch(err => {
									that.orderShow = false;
									console.log(err);
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			/**
			 * @description 选择取消订单原因
			 */
			chooseCancelReason(item, index) {
				this.cancelOrderReason.forEach(val => {
					val.active = false;
				});
				this.cancelOrderReason[index].active = true;
				this.cancelOrderReasonId = item.id;
			},
			/**
			 * @description 获取取消订单原因列表
			 */
			getOrderReason() {
				this.$api
					.post(global.apiUrls.cancelReason, {
						type: 2,
						partner_id: this.$store.state.userInfo.id
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							let list = res.data.data;
							list.forEach(val => {
								val.active = false;
							});
							this.cancelOrderReason = list;
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			/**
			 * @description 确认发货 去选择快递，填写编号
			 * @param {Number,String}  order_sn 订单编号
			 */
			sureDeliver() {
				uni.navigateTo({
					url: '/pages/order/order/order-express/index?order_sn=' + this.order_sn
				});
			},

			/**
			 * @description 删除订单
			 */
			//
			delOrder(order_sn) {
				let that = this;
				this.$util.showModal({
					title: '提示',
					content: '确定删除吗？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							that.$api
								.post(global.apiUrls.shop_delete_order, {
									order_sn: that.order_sn
								})
								.then(res => {
									console.log(res);
									if (res.data.code == 1) {
										that.$message.success('操作成功');

										that.getOrderDetail(that.order_sn);
									} else {
										that.$message.info(res.data.msg);
									}
								})
								.catch(err => {
									console.log(err);
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			toEvalue(goods) {
				let data = {
					thumb: goods.goods_thumb, //图片
					name: goods.goods_name, //商品title
					shop_price: goods.shop_price, //价格
					id: goods.goods_id
				}
				data = JSON.stringify(data);
				uni.navigateTo({
					url: '/pages/order/evalue/evalue/index?item=' + data
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.order-detail-page {
		// background-image: url(../../static/bg-1.png);
		// background: linear-gradient( 180deg, #409EFF 0%, #4E8CEE 100%);
		background-repeat: no-repeat;
		background-size: 100% auto;
		min-height: calc(100vh - 88rpx);
		padding-top: calc(88rpx + var(--status-bar-height));
		font-family: PingFang SC;
	}

	// 订单状态提示信息 start
	.order-status-title {
		height: 120rpx;
		line-height: 120rpx;
		text-indent: 32rpx;
		background: linear-gradient(180deg, #FFDAE1 0%, #ffffff 100%);
	}

	// 订单状态提示信息 end

	// 顶部导航栏-开始
	.cu-bar {
		color: white;
		box-shadow: none;
		// background-image: url(../../static/bg-1.png);
		background: #FC6497;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.back_c {
		background: linear-gradient(180deg, #FC6497 0%, #FC6497 100%);
	}

	// 顶部导航栏-结束


	// 订单状态-开始
	.status-box {
		padding: 20rpx 24rpx;

		.status {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.icon {
			width: 140rpx;
			height: 140rpx;
			margin-right: 14rpx;
		}
	}

	.group-info {
		margin: 24rpx;
		background-color: #FFFFFF;

		.group-tip {
			width: 26rpx;
			height: 28rpx;
		}

		.header-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;

			text {
				font-size: 50rpx;
			}

			image {
				width: 100%;
				height: 100%;
				;
			}
		}
	}

	.border {
		border: 1rpx dashed #dedede;
	}

	// 订单统一样式 start
	.text-000 {
		color: #000000;
	}

	.order-radio-top-half {
		border-radius: 16rpx 16rpx 0 0;
	}

	.order-radio-bottom-half {
		border-radius: 0 0 16rpx 16rpx;
	}

	.order-radio {
		border-radius: 16rpx;
	}

	.order-wrap {
		padding: 24rpx 32rpx 16rpx;
		box-sizing: border-box;
		background: #ffffff;
		margin: 0 24rpx;

		.order-item {
			padding: 16rpx 0;

			.order-item-title {
				margin-right: 60rpx;
				width: 112rpx;
			}

			.order-item-title-max {
				margin-right: 60rpx;
				width: 200rpx;
			}

			.order-item-info {
				width: calc(100% - 175rpx);
				word-break: break-all;

				.text-price {
					color: #FC6497;
				}
			}

			.order-item-image {
				width: calc(100% - 175rpx);

				.img-wrap {
					position: relative;
					margin-right: 1.3%;
					margin-bottom: 1.3%;
					width: 32%;
					padding-bottom: 32%;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	// 订单统一样式 end
	// 地址信息 start
	.address-wrap {
		padding: 26rpx 32rpx 34rpx;
		margin: 0 24rpx;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;

		.img {
			width: 100%;
			height: 6rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.address {
			.address-img {
				margin-right: 22rpx;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.address-info {
				.address-title {
					padding: 6rpx 0;

					.tag {
						min-width: 56rpx;
						height: 34rpx;
						line-height: 34rpx;
						text-align: center;
						margin-right: 16rpx;
						border-radius: 8rpx;
						padding: 0 15rpx;
						color: #FC6497;
						background-color: rgba($color: #FC6497, $alpha: 0.1);
						border: 1px solid #FC6497;
					}

					.address-name {}

					.address-phone {
						margin-left: 24rpx;
					}
				}

				.address-pos {
					padding: 6rpx 0;
				}
			}
		}
	}

	// 地址信息 end
	// 商品信息 start
	.order-goods-wrap {
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #ffffff;
		margin: 24rpx 24rpx 0 24rpx;

		.order-item-content {
			padding: 32rpx 0;

			.order-item-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				background: #eeeeee;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.order-item-info {
				width: calc(100% - 204rpx);

				.order-item-sku {
					padding: 16rpx 0 40rpx;
					height: 96rpx;
				}

				.order-price {
					text {
						&:nth-child(1) {
							color: #FB2A25;
						}
					}
				}
			}
		}
	}

	// 商品信息 end

	// 预售商品 start
	.goods-price {
		color: #FB2A25;
	}

	.item {
		padding-bottom: 32rpx;

		&.total-price {
			padding-top: 32rpx;
			border-top: 1px solid #EEEEEE;
		}
	}

	// 预售商品 end



	// 底部按钮 start
	.footer {
		&:after {
			content: '';
			display: block;
			width: 100%;
			height: 100rpx;
		}
	}

	.order-btn-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		padding: 0 32rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.order-btn {
			height: 100rpx;

			.order-btn-item {
				width: 170rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #F6F6F6;
				border-radius: 30rpx;
				margin-left: 24rpx;
				color: #333333;

				&.active {
					background-color: #FC6497;
					color: #FFFFFF;
				}
			}
		}
	}

	// 底部按钮 end
	// 修改金额 start
	.money-wrap {
		width: 600rpx;
		min-height: 100%;
		background: #ffffff;
		padding: 0 10rpx;
		padding-bottom: 140rpx;
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		position: relative;

		.money-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #ffffff;
			padding: 20rpx 32rpx 0;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

			.btn {
				width: 100%;
				height: 90rpx;
				border-radius: 45rpx;
				line-height: 90rpx;
				color: #ffffff;
				background: linear-gradient(180deg, #FC6497 0%, #FC6497 100%);
			}
		}

		.order-item-content {
			.order-item-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				background: #eeeeee;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.order-item-info {
				width: calc(100% - 204rpx);

				.order-item-sku {
					padding: 12rpx 0 0rpx;
					height: 44rpx;
				}

				.order-price {
					padding: 4rpx 0;

					text {
						&:nth-child(2) {
							color: #FC6497;
						}
					}

					.placeholder {
						font-size: 28rpx;
					}

					view {
						&:nth-child(1) {
							color: #FC6497;
							background: #f1f1f1;
							border-radius: 8rpx;

							.text-symbol {
								transform: scale(0.7);
								margin-bottom: -4rpx;
							}
						}
					}
				}
			}
		}
	}

	// 修改金额 end
	// 取消订单 start
	.text-ccc {
		color: #cccccc;
	}

	.cancel-order {
		padding: 0 32rpx;
		box-sizing: border-box;

		.cancel-order-title {
			padding: 32rpx 0;

			.circle {
				width: 8rpx;
				height: 8rpx;
				background: rgba(255, 80, 1, 0.5);
				margin: 0 6rpx;

				&.shallow {
					background: rgba(255, 80, 1, 1);
				}
			}
		}

		.cancel-order-reason {
			.reason-item {
				height: 104rpx;
			}
		}

		.cancel-order-btn {
			margin: 48rpx 0 37rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(180deg, #FC6497 0%, #FC6497 100%);
			border-radius: 45rpx;
		}
	}

	// 取消订单 end
	.order-price .num {
		width: 120rpx;
	}

	.btns {
		width: 100%;
		background-color: white;

		.btn {
			min-width: 150rpx;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 24rpx;
			border-radius: 8rpx;
			margin-left: 20rpx;
			background: #FC6497;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>